<template>
  <div class="default-wrapper">
    <NuxtLayout name="header" />
    <slot />
    <el-button type="primary" @click="drawer = true" :icon="Setting" />
    <NuxtLayout name="footer" />
  </div>
  <el-drawer v-model="drawer" :with-header="false" size="40%">
    <component :is="indexContent"></component>
  </el-drawer>
</template>

<script setup>
import { Setting } from "@element-plus/icons-vue";
import { watch } from "vue";
const route = useRoute();
const drawer = ref(false);

const indexContent = resolveComponent("index-content");
const introContent = resolveComponent("intro-content");

watch(
  () => route.name,
  () => {
    console.log("route", route.name);
  },
);
</script>

<style lang="scss" scoped>
.default-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;

  .el-button {
    width: 70px;
    height: 70px;
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 999;
    border-radius: 6px 0 0 6px;
  }
}
</style>
